<template>
    <div class="pay-container">
        <div class="pay-info">
            <h2>订单提交成功，请尽快付款！</h2>
            <p class="warning">请您尽快完成支付</p>
            <div class="countdown">订单创建时间：{{ formatOrderTime }}</div>

            <div class="order-detail">
                <div class="amount-info">
                    <span>应付金额</span>
                    <span class="amount">{{ orderInfo.amount?.toFixed(2) }}元</span>
                </div>

                <div class="payment-methods">
                    <div class="payment-item" @click="handlePay" @mouseenter="showBalance = true"
                        @mouseleave="showBalance = false">
                        <span>余额支付</span>
                        <span v-if="showBalance">当前剩余：{{ orderInfo.balance?.toFixed(2) }}元</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrderDetailForPay, payOrderByBalance } from '@/api/order'

const route = useRoute()
const router = useRouter()
const orderInfo = ref({})
const showBalance = ref(false)

// 格式化订单时间
const formatOrderTime = computed(() => {
    if (!orderInfo.value.orderTime) return ''
    // 直接处理时间字符串，不进行时区转换
    const timeStr = orderInfo.value.orderTime
    const [datePart, timePart] = timeStr.split('T')
    const [year, month, day] = datePart.split('-')
    const [hour, minute, second] = timePart.split(':')
    return `${year}年${month}月${day}日 ${hour}:${minute}:${second.split('.')[0]}`
})


// 获取订单信息
const getOrderInfo = async () => {
  try {
    const orderId = route.query.orderId
    const response = await getOrderDetailForPay(orderId)
    if (response.code === 200 && response.data) {
      orderInfo.value = response.data
    }
  } catch (error) {
    console.error('获取订单信息失败:', error)
  }
}

// 处理支付
const handlePay = async () => {
    try {
        const orderId = route.state?.orderId
        const response = await payOrderByBalance(orderId)
        if (response.code === 200) {
            alert('支付成功！2秒后返回首页...')
            setTimeout(() => {
                router.push('/index')
            }, 2000)
        } else {
            alert(response.data)
        }
    } catch (error) {
        console.error('支付失败:', error)
        alert('支付失败，请重试！')
    }
}

onMounted(() => {
    getOrderInfo()
})
</script>

<style scoped>
.pay-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

.pay-info {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #333;
    margin-bottom: 10px;
}

.warning {
    color: #666;
    margin-bottom: 20px;
}

.countdown {
    color: #f23030;
    font-size: 16px;
    margin-bottom: 30px;
}

.amount-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.amount {
    color: #f23030;
    font-size: 24px;
    font-weight: bold;
}

.payment-methods {
    margin-top: 30px;
}

.payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.payment-item:hover {
    border-color: #f23030;
}


.payment-item img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.alipay,
.wechat {
    display: flex;
    align-items: center;
}

</style>